<template>
  <div class="user">
    <el-form :inline="true" :model="userForm" class="demo-form-inline">
      <el-form-item label="请输入用户名进行查询" prop="name">
        <el-input v-model="userForm.username" size="small" clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="dataSearch"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="toAdd">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- /按钮 -->
    <!-- 内容 -->
    <el-table
      border
      size="small"
      :data="users"
      :header-cell-style="{ background: '#185DAD', color: 'white' }"
    >
      <el-table-column
        label="序号"
        type="index"
        :index="1"
        width="50px"
      ></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="姓名" prop="realname"></el-table-column>
      <el-table-column label="性别" prop="gender"></el-table-column>
      <el-table-column label="手机号" prop="telephone"></el-table-column>
      <el-table-column label="出生日期" prop="birth">
        <template slot-scope="scope">
          <span>{{ scope.row.birth | fmtDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px" align="center">
        <template v-slot:default="scope">
          <el-button type="primary" size="mini" @click="editUser(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" size="mini" @click="delUser(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- /内容 -->
    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next,total"
      @current-change="currentChangeHandler"
      :current-page="this.page"
      :page-size="this.pageSize"
      :total="this.total"
    >
    </el-pagination>
    <!-- /分页 -->
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="visible" width="60%">
      <el-form label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.realname"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="form.birth"
            type="date"
            placeholder="选择日期"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="form.telephone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submit" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <!-- /模态框 -->
  </div>
</template>

<script>
// 1. 导入请求函数
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      title: "",
      visible: false,
      page: 1,
      pageSize: 10,
      total: 30,
      users: [],
      form: {
        gender: "女",
      },
      userForm: {},
    };
  },
  // 2.在vue实例创建完毕之后就调用加载用户信息的接口
  created() {
    this.loadUserData();
    this.getUserType();
  },
  methods: {
    async dataSearch() {
      this.loadUserData(this.userForm.username);
    },
    async getUserType() {
      let res = await get("/role/findAll");
      this.allUserType = res.data;
    },
    // 修改用户信息
    editUser(row) {
      // 将要修改的信息赋值给当前表单，进行双向数据绑定，再次基础上完成修改操作
      this.form = { ...row };
      this.title = "修改用户信息";
      this.visible = true;
    },
    // 删除用户信息
    delUser(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "/baseUser/deleteById";
        get(url, { id: row.id }).then((response) => {
          this.$message({ type: "success", message: response.message });
          this.loadUserData();
        });
      });
    },
    // 提交表单
    submit() {
      // 1. 获取表单数据  this.form
      // 2. 交互
      // console.log(this.form);
      let url = "/baseUser/saveOrUpdate";
      post(url, this.form).then((response) => {
        // 3. 提示
        this.$message({ type: "success", message: response.message });
        // 4. 关闭模态框
        this.visible = false;
        // 5. 刷新数据
        this.loadUserData();
      });
    },
    // 加载用户信息
    async loadUserData(username = "") {
      let params = {
        page: 1,
        pageSize: 10,
        username,
      };
      let res = await get("/baseUser/pageQuery", params);
      this.users = res.data.list;
      this.page = res.data.page;
      this.pageSize = res.data.pageSize;
      this.total = res.data.total;
    },
    // 打开模态框去添加，
    toAdd() {
      this.form = { gender: "女" };
      this.title = "添加新用户";
      this.visible = true;
    },
    // 翻页
    currentChangeHandler(page) {
      this.page = page;
      this.loadUserData();
    },
  },
};
</script>